<template>
  <div>
    <div v-show="step <= 0">
      <div class="search-form mb-3" :class="{ 'to-top': hasSearch }">
        <div class="search-form__content">
          <div class="search-title" v-if="!hasSearch">高效、准确、全面的企业信用查询</div>
          <div class="input-group input-group-lg">
            <input
              type="text"
              class="form-control"
              v-model="params.key"
              placeholder="请输入企业名称、地址、经营范围..."
              ref="searchInput"
              @keyup.enter="onKeyChange()"
            />
            <div class="input-dismiss" v-show="params.key" @click="onKeyClear">
              <i class="el-icon-close"></i>
            </div>
            <div class="input-group-append">
              <button
                class="btn btn-search"
                type="button"
                @click="onKeyChange()"
                :disabled="loading"
              >
                <span class="mr-2">
                  <i class="el-icon-search" v-if="!loading"></i>
                  <i class="fa fa-fw fa-spinner fa-pulse" v-else></i>
                </span>
                <span>查询一下</span>
              </button>
            </div>
          </div>
          <div style="height: 80px" v-if="!hasSearch"></div>
        </div>
      </div>

      <div class="search-list">
        <div class="card mb-3" v-show="hasSearch">
          <div class="card-header font-weight-bold bg-white">查询筛选</div>
          <div class="card-body">
            <div class="params-item">
              <div class="params-label">企业状态：</div>
              <ul class="list-inline flex-fill">
                <li class="list-inline-item" v-for="(item, index) in paramsStatus" :key="index">
                  <div
                    class="params-btn"
                    :class="{ active: item.value === params.companyStatus }"
                    @click="onStatusChange(item.value)"
                  >
                    {{ item.label }}
                  </div>
                </li>
              </ul>
            </div>

            <div class="params-item border-bottom-0">
              <div class="params-label">注册资本：</div>
              <ul class="list-inline flex-fill">
                <li
                  class="list-inline-item"
                  v-for="(item, index) in paramsRegisteredCapital"
                  :key="index"
                >
                  <div
                    class="params-btn"
                    :class="{ active: index === params.registeredCapital }"
                    @click="onRegisterChange(index)"
                  >
                    {{ item.label }}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="card" v-show="hasSearch">
          <div class="p-3">
            <span>为您找到相关信息如下(共查询到{{ totalCount }}条记录)：</span>
            <i class="fa fa-fw fa-spinner fa-pulse" v-if="loading"></i>
          </div>

          <div class="container-fluid" v-loading="loading">
            <div
              class="row company-item"
              v-for="item in list"
              :key="item.TYSHXYDM || item.QYMC"
              @click="onGoDetail(item)"
            >
              <div class="col-sm-2">
                <img :src="companyLogo" alt="" class="company-logo" />
              </div>
              <div class="col-sm-8">
                <h3 class="company-name">{{ item.QYMC }}</h3>

                <div class="d-flex mb-3">
                  <div class="mr-3">
                    <i class="fa fa-fw fa-user text-muted mr-1"></i>
                    <span>法定代表人：{{ item.FDDBRFZR }}</span>
                  </div>
                  <div class="mr-3">
                    <i class="fa fa-fw fa-rmb text-muted mr-1"></i>
                    <span>注册资本：{{ item.ZCZB }}</span>
                  </div>
                  <div class="mr-3">
                    <i class="fa fa-fw fa-calendar-check-o text-muted mr-1"></i>
                    <span>成立时间：{{ item.CLSJ }}</span>
                  </div>
                </div>

                <div class="d-flex mb-3">
                  <div class="mr-3">
                    <i class="fa fa-fw fa-phone text-muted mr-1"></i>
                    <span>电话：{{ item.LXDH }}</span>
                  </div>
                  <div class="mr-3">
                    <i class="fa fa-fw fa-building-o text-muted mr-1"></i>
                    <span>行业：{{ item.XYLXDL }}</span>
                  </div>
                </div>

                <div class="d-flex">
                  <div class="mr-3">
                    <i class="fa fa-fw fa-map-marker text-muted mr-1"></i>
                    <span>地址：{{ item.JYDZ }}</span>
                  </div>
                </div>
              </div>
              <div class="col-sm-2">
                <div class="badge badge-success rounded-pill">{{ item.JYZT }}</div>
              </div>
            </div>
          </div>

          <div class="d-flex p-3 justify-content-center border-top">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :current-page.sync="params.index"
              :page-size="params.size"
              :total="totalCount"
              @current-change="getData"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <div class="container" v-show="step >= 1">
      <el-page-header @back="onBack" class="mb-3">
        <template slot="title">
          <span>返回查询</span>
        </template>
        <template slot="content">
          <span class="text-muted">信用详情</span>
        </template>
      </el-page-header>
      <business-info :usci="usciSelected"></business-info>
    </div>
  </div>
</template>

<script>
import BusinessInfo from '@/credit/views/county/finance/BusinessInfo.vue'

export default {
  components: {
    BusinessInfo,
  },
  props: {},
  data() {
    return {
      paramsStatus: [],
      enumCompanyStatus: {},
      hasCompanyStatus: false,
      paramsRegisteredCapital: [
        { label: '不限' },
        { label: '500万以下', max: 500 },
        { label: '500~1000万', min: 500, max: 1000 },
        { label: '1000~5000万', min: 1000, max: 5000 },
        { label: '5000万以上', min: 5000 },
      ],
      hasSearch: false,
      loading: false,
      params: {
        key: '',
        index: 1,
        size: 20,
        companyStatus: undefined,
        registeredCapital: 0,
      },
      list: [],
      totalCount: 0,
      step: 0,

      usciSelected: '',
    }
  },
  computed: {
    companyLogo() {
      return require('@/credit/assets/img/pf.png')
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async getData(index = 1) {
      if (this.loading) return

      if (!this.hasCompanyStatus) {
        await this.getCompnayStatus()
      }

      this.params.index = index
      const { min, max } = this.paramsRegisteredCapital[this.params.registeredCapital]

      this.loading = true
      this.$http
        .get('/api/xyd/view/getBusinessInfoForIndex', {
          params: {
            key: this.params.key,
            index: this.params.index,
            size: this.params.size,
            busStatus: this.params.companyStatus,
            registerFundsMin: min,
            registerFundsMax: max,
          },
        })
        .then(res => {
          const data = res.data.businessInfo || {}
          this.list = (data.data || []).map(it => {
            it.CLSJ = this.formatDay(it.CLSJ)
            it.JYZT = this.enumCompanyStatus[it.JYZT || ''] || it.JYZT
            return it
          })
          this.totalCount = data.totalCount || 0

          this.hasSearch = true
          this.scrollTop()
        })
        .catch(err => {
          this.$message.error((err && err.data && err.data.error_description) || '查询出错，请重试')
          throw err
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 企业状态
    async getCompnayStatus() {
      const res = await this.$api.getData({
        service: 'xyd',
        table: 'system_enum',
        params: {
          'enum_field.eq': 'GS_ZCDJXX.regstate',
          fields: ['enum_value', 'enum_key'],
        },
        order: {
          order_num: 'asc',
        },
      })
      const data = res.data || []
      this.enumCompanyStatus = data.reduce((p, c) => {
        p[c.enum_value || ''] = c.enum_key
        return p
      }, {})
      this.paramsStatus = data.map(it => ({
        label: it.enum_key,
        value: it.enum_value,
      }))
      this.paramsStatus.unshift({
        label: '全部',
        value: undefined,
      })
      this.hasCompanyStatus = true
    },
    formatDay(value) {
      if (!value) return ''
      return `${value}`.substring(0, 10)
    },
    // 滚动到页面顶部
    scrollTop() {
      this.$emit('scroll-top')
    },
    onKeyChange() {
      if (!this.params.key) {
        this.$message.error('请输入查询关键字')
        this.$refs.searchInput && this.$refs.searchInput.focus()
        return
      }
      this.params.index = 1
      this.getData()
    },
    onKeyClear() {
      this.reset()
    },
    onStatusChange(status) {
      this.params.companyStatus = status
      this.getData()
    },
    onRegisterChange(index) {
      this.params.registeredCapital = index
      this.getData()
    },
    onGoDetail(row) {
      this.usciSelected = row.TYSHXYDM
      this.step = 1
      this.scrollTop()
    },
    onBack() {
      this.step = 0
    },
    reset() {
      this.step = 0
      this.usciSelected = ''
      this.params.key = ''
      this.params.index = 1
      this.params.statusIndex = 0
      this.params.registeredCapital = 0
      this.list = []
      this.totalCount = 0
      this.hasSearch = false
    },
  },
}
</script>

<style lang="scss" scoped>
.search-form {
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding: 1rem;
  transition: min-height 0.2s ease-in-out;
  background-image: url('/static/img/bg.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 2px;

  &.to-top {
    min-height: 0;
  }
}
.search-form__content {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}
.search-title {
  font-size: 2rem;
  color: #fff;
  text-align: center;
  margin-bottom: 4rem;
  font-family: SimHei, SimSum;
  letter-spacing: 8px;
}
.input-dismiss {
  position: absolute;
  color: #ccc;
  z-index: 1000;
  cursor: pointer;
  width: 20px;
  right: 130px;
  text-align: center;
  top: 10px;
}

.btn-search {
  background-color: #457cc0;
  color: #fff;
  padding-left: 2rem;
  padding-right: 2rem;
}

.search-list {
  margin: 0 auto;
  max-width: 1200px;
}

.company-item {
  border-top: 1px solid $gray-200;
  padding-top: 2rem;
  padding-bottom: 2rem;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  &:hover {
    background-color: #f4f4f4;
    box-shadow: 0px 0px 12px 4px #e0e0e0;
  }
}

.company-logo {
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
}

.company-name {
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.25rem;
}

.params-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px dashed $border-color;
}
.params-label {
  padding: 0.2rem 0;
}
.params-btn {
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  border-radius: $border-radius;
  transition: all 0.25s ease-out;

  &.active,
  &:hover {
    color: var(--primary-text);
    background-color: var(--primary);
  }
}
</style>
